<template>
  <div class="c-pv24 c-ph24 bg-F6F7FB">
    <img @click="goPromotionSwiper" class="c-w100" src="https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/9_material_admin/image/assets/i/wap/agent/wxshopBg2.png" alt="">
    <div class="c-mt20">
      <div class="c-ph20 c-pv38 c-bg-white c-br20 c-flex-row c-aligni-center c-justify-sb c-mb20" v-for="(item, index) in dataList" :key="index">
        <div class="c-fw-b c-fc-xblack c-fs28 c-w0 c-flex-grow1 c-pr12">{{item.finderName}}</div>
        <div class="c-br32 c-fs20 c-pv8 c-ph20" :class="item.status == 1 ? 'btn1' : 'btn2'" @click="goSharerAdd(item, index)">{{item.status == 1 ? '复制视频号去推广' : '成为视频号分享员'}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common.js";
export default {
  name: 'wxecshopList',
  components: {
  },
  props: [],
  beforeCreate() {

  },
  data() {
    return {
      theme: localStorage.getItem("colorName") || "mb5_default",
      companyName: window.localStorage.getItem("companyName"),
      dataList: [],
    }
  },
  created() {
  },
  mounted() {

  },
  computed: {

  },
  watch: {

  },
  methods: {
    getMpWxEcShop() {
      utilJs.getMethod(`${global.apiurl}wxecshop/getMpWxEcShop`, (res) => {
        this.dataList = res;
      });
    },
    goPromotionSwiper() {
      this.$routerGo(this, "push", { path: "/homePage/wxecshop/promotionImgs" });
    },
    goSharerAdd(item, index) {
      if (item.username && item.status != 1) {
        this.searchSharer(item, index);
        return
      }
      if (item.status == 1) {
        utilJs.copyText(item.finderName);
      } else {
        this.$routerGo(this, "push",
        { path: "/homePage/wxecshop/sharerAdd",
          query: {
          username: item.username,
          wxEcShopAppId: item.wxEcShopAppId,
          status: item.status,
          wxEcShopAppName: item.wxEcShopAppName
          }
        });
      }
    },
    // 同步分享员数据
    searchSharer(item, index) {
      let data = {
        username: item.username,
        wxEcShopAppId: item.wxEcShopAppId
      }
      utilJs.postMethod(`${global.apiurl}wxecshop/searchSharer`, data, (res) => {
        if (res.status == 1) {
          this.$showCjToast({
            text: '您已是分享员，可直接复制后去搜索该视频号',
            type: 'success'
          });
          this.$set(this.dataList[index], 'status', 1);
        }
      }, failres => {
      });
    },
  },
  activated() {
    this.getMpWxEcShop();
    setDocumentTitle('视频号分享员');
  },
  deactivated() {

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.btn1 {
  background-color: #F74163;
  color: #fff;
}
.btn2 {
  background: #f741631a;
  color: #F74163;
  border: 1px solid #F74163;
}
.bg-F6F7FB {
  background-color: #F6F7FB;
}
</style>
